<template>
  <div class="playbar">
    <!-- 左侧歌曲大图 -->
    <div class="songImg" @click="togShowMusicLyrics">
      <el-image
        style="width: 64px; height: 64px"
        :src="music.picUrl"
        fit="fill"
      ></el-image>
      <i v-if="isShowMusicLyrics" class="el-icon-arrow-down"></i>
      <i v-else class="el-icon-arrow-up"></i>
    </div>

    <!-- 歌曲名称和艺术家 -->
    <div class="songNameAndArtist">
      <div class="songname" id="songname" :text="music.name">
        {{ music.name }}
      </div>
      <div class="artist" id="artist" :text="music.artist">
        {{ music.artist }}
      </div>
    </div>

    <!-- 音乐播放控制栏 -->
    <div class="playTools">
      <!-- 音乐播放控制按钮 -->
      <div class="playTools_Btns">
        <div class="btn_1" @click="togMusicLoop">
          <i :style="isLoop ? 'color:#ef6767' : ''" class="el-icon-refresh"></i>
        </div>
        <div class="btn_2">
          <i
            v-once-click
            class="el-icon-caret-left"
            @click="changeMusic(-1)"
          ></i>
        </div>
        <div class="btn_3">
          <i
            @click="play"
            :class="music.isPlay ? 'el-icon-video-pause' : 'el-icon-video-play'"
          ></i>
        </div>
        <div class="btn_4">
          <i
            v-once-click
            class="el-icon-caret-right"
            @click="changeMusic(1)"
          ></i>
        </div>
        <div class="btn_5" @click="togShowMusicLyrics">
          <span :class="isShowMusicLyrics ? 'musicLyricsIsShow' : ''">词</span>
        </div>
      </div>

      <!-- 音乐进度条 -->
      <div class="playTools_timebar">
        <div class="musicTime">{{ formatTime(music.currentTime) }}</div>
        <div class="musicTimeBar">
          <el-slider
            @change="changeTime"
            :format-tooltip="formatTime"
            :max="music.maxTime / 1000"
            v-model="music.currentTime"
          ></el-slider>
        </div>
        <div class="musicTime">{{ formatTime(music.maxTime / 1000) }}</div>
      </div>
    </div>

    <!-- 其他功能 -->
    <div class="otherTools">
      <div class="otherTools_box1">
        <div>标准</div>
      </div>
      <div class="otherTools_box2">
        <i class="el-icon-bangzhu"></i>
      </div>
      <!-- 音量模块 -->
      <div class="otherTools_box3">
        <el-popover placement="top-start" trigger="hover">
          <div style="display: flex">
            <el-button
              icon="el-icon-minus"
              circle
              @click="changeVolume(-10)"
            ></el-button>

            <el-slider
              @input="changeVolume('barChange')"
              v-model="music.volume"
              vertical
              height="200px"
            >
            </el-slider>

            <el-button
              icon="el-icon-plus"
              circle
              @click="changeVolume(10)"
            ></el-button>
          </div>
          <el-button
            class="volume_btn"
            icon="el-icon-headset"
            slot="reference"
          ></el-button>
          <!-- <i slot="reference" style="font-size: 26px" class="el-icon-headset"></i> -->
        </el-popover>
      </div>
      <div class="otherTools_box4">
        <i class="el-icon-user"></i>
      </div>
      <!-- 打开播放列表 -->
      <div class="otherTools_box5">
        <i
          class="el-icon-s-grid"
          :style="musicListRightBarVisible ? 'color: #EC4141' : ''"
          @click="musicListRightBarVisible = !musicListRightBarVisible"
        ></i>
      </div>
    </div>

    <!-- 右下角歌单列表 -->
    <div class="musicListRightBar" v-show="musicListRightBarVisible">
      <div class="musicListRightBar_title">当前播放</div>
      <div class="musicListRightBar_total" v-if="songList.length == 0">
        播放列表未指定
      </div>
      <div class="musicListRightBar_total" v-else>
        总{{ songList.length }}首
      </div>

      <el-table
        :data="songList"
        style="width: 100%"
        stripe
        highlight-current-row
        @row-dblclick="selectRightMusicListSong"
        v-double-click
      >
        <el-table-column type="index"> </el-table-column>
        <el-table-column prop="name" label="标题" width="180">
        </el-table-column>
        <el-table-column width="40">
          <template slot-scope="scope">
            <i class="el-icon-loading" v-show="scope.row.id == music.id"></i>
          </template>
        </el-table-column>
        <el-table-column prop="artistname" label="歌手" width="120">
        </el-table-column>
        <el-table-column prop="time" label="时长" width="60">
          <template slot-scope="scope">
            {{ scope.row.time | songTimeFilter }}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 歌曲歌词 和 评论-->
    <div class="musicLyrics" v-show="isShowMusicLyrics">
      <!-- 音乐标题  -->
      <div class="musicLyrics_title" id="musicLyricsTitle">
        <div class="name">{{ music.name }}</div>
        <div class="artist">{{ music.artist }}</div>
      </div>

      <!-- 音乐图片和歌词 -->
      <div class="musicLyrics_img_lyrics">
        <!-- 图片 -->
        <div class="musicLyrics_musicImg">
          <el-image
            style="width: 260px; height: 260px"
            :src="music.picUrl"
            fit="fill"
          ></el-image>
        </div>

        <!-- 歌词 -->
        <div class="musicLyrics_lyricsBox">
          <ul v-double-click>
            <li
              v-for="(item, index) in lyricsObjArr"
              :id="
                music.currentTime * 1000 > item.time &&
                music.currentTime * 1000 < item.pre
                  ? 'nowLi'
                  : ''
              "
              :key="index"
              :data-index="index"
              ref="lyric"
              @dblclick="lyricChangeTime(item.time)"
            >
              {{ item.text }}
            </li>
          </ul>
        </div>
      </div>

      <!-- 评论 -->
      <div class="musicLyrics_comment">
        <div class="commentTotal">
          全部评论({{ music.comment.commentTotal }})
        </div>
        <!-- 最热评论 -->
        <div class="hotComment">
          <ul>
            <li v-for="item in music.comment.hotComment" :key="item.commentId">
              <!-- 左侧小头像 -->
              <div style="padding: 10px">
                <el-image
                  style="width: 42px; height: 42px"
                  :src="item.user_picUrl"
                  fit="fill"
                ></el-image>
              </div>
              <!-- 评论详情 -->
              <div style="padding: 10px">
                <div class="nickname_content">
                  <span class="nickname">{{ item.user_nickname }}: </span>
                  <span class="content">{{ item.content }}</span>
                </div>
                <div class="time_likedCount">
                  <div>{{ item.time | commentTimeFilter }}</div>
                  <div>点赞数({{ item.likedCount }})</div>
                </div>
              </div>
            </li>
          </ul>
        </div>

        <div class="commentTotal" id="theNewComments">
          最新评论({{ music.comment.commentTotal }})
        </div>
        <!-- 最新评论 -->
        <div class="newComment">
          <ul>
            <li v-for="item in music.comment.newComment" :key="item.commentId">
              <!-- 左侧小头像 -->
              <div style="padding: 10px">
                <el-image
                  style="width: 42px; height: 42px"
                  :src="item.user_picUrl"
                  fit="fill"
                ></el-image>
              </div>
              <!-- 评论详情 -->
              <div style="padding: 10px">
                <div class="nickname_content">
                  <span class="nickname">{{ item.user_nickname }}: </span>
                  <span class="content">{{ item.content }}</span>
                </div>
                <div class="time_likedCount">
                  <div>{{ item.time | commentTimeFilter }}</div>
                  <div>点赞数({{ item.likedCount }})</div>
                </div>
              </div>
            </li>
          </ul>
        </div>

        <!-- 底部分页栏 -->
        <div class="commentPagination">
          <el-pagination
            layout="prev, pager, next"
            :total="music.comment.commentTotal"
            :current-page.sync="commentPage"
            @current-change="commentPageChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <!-- 音乐播放器 -->
    <audio ref="music" type="audio/flac" :src="music.src"></audio>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'playbar',
  data() {
    return {
      // 音乐模块相关信息
      music: {
        // 音乐播放器 播放、暂停图片控制
        isPlay: false,
        // 音乐最大时长 单位 毫秒
        maxTime: 216000,
        // 音乐当前时间
        currentTime: 0,
        // 是否设置默认音量
        defaultVolume: true,
        // 音乐设置的音量
        volume: 20,
        // 音乐图片
        picUrl:
          'http://p2.music.126.net/CKWyX_q5nqUEIZ8DE-BUyQ==/109951166221677689.jpg',
        // 音乐地址
        src: '',
        // 音乐id
        id: '1864588584',
        // 音乐名称
        name: 'Drive You Home',
        // 音乐创作者
        artist: '王嘉尔',
        // 音乐在列表中的索引
        index: '',
        // 歌词
        lyric: '',
        // 歌曲评论相关信息
        comment: {
          hotComment: Array,
          newComment: Array,
        },
      },
      // 播放器右侧音乐列表
      songList: [],
      // 控制右侧音乐列表的展开与隐藏
      musicListRightBarVisible: false,
      // 控制歌词界面的展示与否
      isShowMusicLyrics: false,
      // 歌词列表
      lyricsObjArr: [],
      // 歌词索引
      lyricIndex: '',
      // 歌词列表是否滚动
      isScroll: true,
      // 歌曲当前时间 定时器返回值
      currentTimer: '',
      // 歌词滚动 定时器返回值
      scrollTimer: '',
      // 评论默认为第一页
      commentPage: 1,
      // 是否单曲循环
      isLoop: false,
    }
  },
  computed: {
    ...mapState(['musicPlayInfo']),
  },
  created() {
    this.setDefaultSongUrl()
  },
  mounted() {
    this.animationDuration('songname')
    this.animationDuration('artist')

    // 监听歌词列表的滚动,如果列表滚动,歌词滚动效果失效三秒钟
    document
      .getElementsByClassName('musicLyrics_lyricsBox')[0]
      .addEventListener('mousewheel', () => {
        this.isScroll = false
        clearTimeout(this.scrollTimer)
        const scrollTimer = setTimeout(() => {
          this.isScroll = true
        }, 3600)
        this.scrollTimer = scrollTimer
      })
  },
  watch: {
    // 监听音乐播放器挂载的 歌曲信息和播放列表
    musicPlayInfo: function (newVal, oldVal) {
      console.log(newVal)
      const thePlayMusic = newVal.thePlaySongInfo
      const thePlayMusicList = newVal.thePlaySongListInfo

      this.$refs.music.pause()
      setTimeout(() => {
        // this.fetchMusicInfo(thePlayMusic)
        this.getSongUrl(thePlayMusic.id, thePlayMusic.index)
        this.fetchMusicListInfo(thePlayMusicList)
      }, 500)
    },
    'music.currentTime': function () {
      // 如果没有滚动歌词列表,歌词列表会随着时间滚动
      if (this.isScroll) {
        try {
          // document
          //   .querySelector('#nowLi')
          //   .scrollIntoView({ behavior: 'smooth', block: 'center' })

          const el = document.getElementById('nowLi')
          const box = document.getElementsByClassName(
            'musicLyrics_lyricsBox'
          )[0]
          box.scrollTop = el.offsetTop - 240
        } catch (error) {
          return
        }
      }
    },
  },
  filters: {
    // 歌曲时间过滤器
    songTimeFilter: function (val) {
      const dt = new Date(val)
      // 分秒
      const mm = (dt.getMinutes() + '').padStart(2, '0')
      const ss = (dt.getSeconds() + '').padStart(2, '0')

      return `${mm}:${ss}`
    },
    // 日期时间过滤器
    commentTimeFilter: function (val) {
      const dt = new Date(val)

      // 年月日
      // getMonth：返回 0 ~ 11，需要加 1
      const y = dt.getFullYear()
      const m = (dt.getMonth() + 1 + '').padStart(2, '0')
      const d = (dt.getDate() + '').padStart(2, '0')

      // 时分秒
      const hh = (dt.getHours() + '').padStart(2, '0')
      const mm = (dt.getMinutes() + '').padStart(2, '0')
      const ss = (dt.getSeconds() + '').padStart(2, '0')

      return `${y}年${m}月${d}日 ${hh}:${mm}`
    },
  },
  methods: {
    // 设置跑马灯所需时间
    animationDuration(id) {
      const el = document.getElementById(id)

      if (el.offsetWidth < 140) {
        el.style.animationDuration = '0s'
        el.classList.add('change')
        return
      }

      el.classList.remove('change')
      let time = el.offsetWidth / 50 + 's'
      // console.log(time)
      el.style.animationDuration = time
    },
    // 设置初始音乐
    async setDefaultSongUrl() {
      const { data: res } = await this.$http({
        url: `/song/url?id=1864588584`,
        withCredentials: true, //关键
      })

      // console.log(res.data)
      const songInfo = res.data
      this.music.src = songInfo[0].url
      this.getSongLyrics(this.music.id)
      this.getSongComment(this.music.id)
    },
    // 控制歌词页面的展开与隐藏
    togShowMusicLyrics() {
      this.isShowMusicLyrics = !this.isShowMusicLyrics

      if (this.isShowMusicLyrics) {
        setTimeout(() => {
          // 将页面滑动到顶部标题
          // 重新启用歌词自动滑动功能
          const el = document.getElementById('musicLyricsTitle')
          const box = document.getElementsByClassName('musicLyrics')[0]
          box.scrollTop = el.offsetTop
        }, 100)
      }
    },
    // 控制歌曲循环与否
    togMusicLoop() {
      if (this.music.id == '1864588584') {
        return this.$message.warning('此歌曲为预设歌曲，无法切换循环方式')
      }
      this.isLoop = !this.isLoop
      this.$refs.music.loop = this.isLoop
      if (this.isLoop == true) {
        this.$message.success('已设置为单曲循环')
      } else {
        this.$message.success('已取消单曲循环')
      }
    },

    // 监听音乐，更新播放进度
    listenMusic() {
      clearInterval(this.currentTimer)

      // this.$refs.music 为一个 video 对象
      if (!this.$refs.music) {
        console.log('error')
        return
      }
      // 设置默认音量
      if (this.music.defaultVolume) {
        this.setDefaultVolume()
        this.music.defaultVolume = false
      }

      this.music.isPlay = !this.$refs.music.paused

      const playStatusValue = setInterval(() => {
        this.currentTimer = playStatusValue

        // 当播放器被卸载时，销毁定时器
        // 当音乐被暂停时，销毁定时器
        if (!this.$refs.music) {
          clearInterval(playStatusValue)
          return
        }

        // 判断当前音乐进度是否播放完毕，
        // 是的话表示歌曲已经播放完毕，紧接着播放歌单下一首歌曲
        // 如果歌曲设置为单曲循环，则会跳过判断
        if (this.$refs.music.ended) {
          // if (this.$refs.music.loop == true) {
          //   // console.log('loop')
          //   //如何播放器设定为 loop，则单曲循环，跳过以下环节
          //   // this.$refs.music.pause()
          //   // this.fetchMusicInfo(this.songList[this.music.index])
          //   return
          // }

          clearInterval(playStatusValue)

          // 如果歌单为空，则循环播放该歌曲
          if (this.songList.length == 0) {
            this.$refs.music.loop = true
            this.$refs.music.currentTime = 0
            this.listenMusic()
            setTimeout(() => {
              this.$refs.music.loop = false
            }, 5000)
            return this.$message.warning('播放列表为空，将循环播放歌曲')
          }

          // 如何歌单不为空，则播放下一首歌曲
          setTimeout(() => {
            this.$refs.music.loop = false
            this.changeMusic(1)
          }, 100)
          return
        }

        if (this.$refs.music.paused) {
          this.music.isPlay = false
          clearInterval(playStatusValue)
          return
        }

        // 当音乐播放时，每过一秒钟则更新当前音乐进度时间
        this.music.currentTime = this.$refs.music.currentTime
        // console.log(playStatusValue)
        // console.log(this.music.currentTime)
      }, 500)
    },
    // 暂停、开始音乐
    play() {
      // 播放器如果是暂停状态，则播放音乐，并更改音乐列表播放图标
      if (this.$refs.music.paused) {
        this.$refs.music.play()
        this.listenMusic()
      } else {
        this.$refs.music.pause()
        clearInterval(this.currentTimer)
      }

      // 控制播放器 播放图标
      this.music.isPlay = !this.$refs.music.paused
    },
    // 展示音乐播放时长和当前播放进度
    formatTime(time) {
      let it = parseInt(time)
      let m = parseInt(it / 60)
      let s = parseInt(it % 60)
      return (
        (m < 10 ? '0' : '') +
        parseInt(it / 60) +
        ':' +
        (s < 10 ? '0' : '') +
        parseInt(it % 60)
      )
    },
    // 通过时间栏调节音乐进度
    changeTime(time) {
      this.$refs.music.currentTime = time
      this.$refs.music.play()
      this.music.isPlay = !this.$refs.music.paused
      clearInterval(this.currentTimer)
      this.listenMusic()
      // this.music.isPlay = true
    },
    // 更改音量
    changeVolume(v) {
      if (v == 'barChange') {
        // console.log(this.music.volume)
        this.$refs.music.volume = this.music.volume / 100
        return
      }

      this.music.volume += v
      if (this.music.volume > 100) {
        this.music.volume = 100
      }
      if (this.music.volume < 0) {
        this.music.volume = 0
      }
      this.$refs.music.volume = this.music.volume / 100
    },
    // 设置默认音量
    setDefaultVolume() {
      // 只在页面初始化，或者切换音乐、播放音乐时执行一次
      // 只执行一次
      if (this.music.defaultVolume) {
        this.$refs.music.volume = 0.2
        this.music.volume = 20
        this.music.defaultVolume = false
      }
    },

    // 更新歌曲列表
    fetchMusicListInfo(thePlayMusicList) {
      this.songList = thePlayMusicList
    },
    // 获取歌曲 url，并判断歌曲 url 是否可用
    async getSongUrl(songId, index) {
      const { data: res } = await this.$http({
        url: `/song/url?id=${songId}`,
        withCredentials: true, //关键
      })
      // console.log(res.data)
      const songInfo = res.data

      if (songInfo[0].url == null) {
        this.$message.error('暂无音源，播放下一曲')
        if (this.music.index == this.songList.length - 1) {
          setTimeout(() => {
            this.$message.error('歌单暂无音源，无法播放')
          }, 500)
          return
        }
        return this.changeMusic(1)
      }

      this.music.src = songInfo[0].url
      setTimeout(() => {
        this.play()
        this.getSongLyrics(songId)
        this.getSongComment(songId)
        this.fetchMusicInfo(songId, index)
      }, 200)
    },
    // 更新播放歌曲信息
    async fetchMusicInfo(id, index) {
      // 获取歌曲详情
      const { data: res } = await this.$http({
        url: `/song/detail?ids=${id}`,
        withCredentials: true, //关键
      })
      // console.log(res)

      this.music.id = id
      this.music.name = res.songs[0].name
      this.music.index = index
      this.music.picUrl = res.songs[0].al.picUrl
      this.music.maxTime = res.songs[0].dt

      let str = ''
      for (let i = 0; i < res.songs[0].ar.length; i++) {
        str = str + res.songs[0].ar[i].name
        if (i != res.songs[0].ar.length - 1) {
          str = str + '/'
        }
      }
      this.music.artist = str

      setTimeout(() => {
        // 为每一首歌设置不同的跑马灯所需时间
        this.animationDuration('songname')
        this.animationDuration('artist')
      }, 500)
    },
    // 更换歌曲 上一首,下一首
    changeMusic(val) {
      this.$refs.music.pause()

      setTimeout(() => {
        if (this.songList.length == 0) {
          return this.$message.warning('播放列表为空，无法更换歌曲')
        }

        // 获取切换后的音乐标识，并设置在音乐列表中循环
        this.music.index += val
        if (this.music.index > this.songList.length - 1) {
          this.music.index = 0
        }
        if (this.music.index < 0) {
          this.music.index = this.songList.length - 1
        }

        const index = this.music.index
        // 重新获取歌曲信息
        this.getSongUrl(this.songList[index].id, index)
        setTimeout(() => {
          const el = document.getElementById('musicLyricsTitle')
          const box = document.getElementsByClassName('musicLyrics')[0]
          box.scrollTop = el.offsetTop
          this.isScroll = true
        }, 100)
      }, 500)
    },
    // 选择右侧音乐列表中的歌曲进行播放
    selectRightMusicListSong(row) {
      // console.log(row)
      this.$refs.music.pause()

      setTimeout(() => {
        if (this.songList.length == 0) {
          return this.$message.warning('播放列表为空，无法选择播放歌曲')
        }
        this.music.index = row.index

        const index = this.music.index
        // 重新装载歌曲信息
        this.fetchMusicInfo(this.songList[index])
        setTimeout(() => {
          const el = document.getElementById('musicLyricsTitle')
          const box = document.getElementsByClassName('musicLyrics')[0]
          box.scrollTop = el.offsetTop
          this.isScroll = true
        }, 100)
      }, 500)
    },
    // 获取歌曲歌词
    async getSongLyrics(songId) {
      const { data: res } = await this.$http({
        url: `/lyric?id=${songId}`,
        withCredentials: true, //关键
      })

      this.music.lyric = res.lrc.lyric
      // console.log(this.lyric)
      this.formatLyric(this.music.lyric)
    },
    //传入初始歌词文本text
    formatLyric(text) {
      this.lyricsObjArr = []

      //原歌词文本已经换好行了方便很多，我们直接通过换行符“\n”进行切割
      //获取歌词行数
      let arr = text.split('\n')
      let row = arr.length

      for (let i = 0; i < row; i++) {
        //现在每一行格式大概就是这样"[00:04.302][02:10.00]hello world";
        //我们可以通过“]”对时间和文本进行分离
        //把歌词文本从数组中剔除出来，获取到歌词文本了！
        let temp_row = arr[i]
        let temp_arr = temp_row.split(']')
        let text = temp_arr.pop()

        //再对剩下的歌词时间进行处理
        temp_arr.forEach((element) => {
          let obj = {}

          //先把多余的“[”去掉，再分离出分、秒
          //把时间转换成与currentTime相同的类型，方便待会实现滚动效果
          let time_arr = element.substr(1, element.length - 1).split(':')
          let s = time_arr[0] * 60 * 1000 + time_arr[1] * 1000

          obj.time = s
          obj.text = text
          obj.pre = ''

          //每一行歌词对象存到组件的lyricsObjArr歌词属性里
          this.lyricsObjArr.push(obj)
        })
      }

      this.lyricsObjArr.push({
        time: 99999955555,
        text: ' ',
        pre: 99999999999,
      })

      //由于不同时间的相同歌词我们给排到一起了，所以这里要以时间顺序重新排列一下
      this.lyricsObjArr.sort((a, b) => {
        //设置一下排序规则
        return a.time - b.time
      })

      // 将下一句歌词的开始时间保存到当前项，为歌词滚动判断提供范围
      const target = this.lyricsObjArr
      for (let i = 0; i < target.length; i++) {
        if (i + 1 == target.length) break
        target[i].pre = target[i + 1].time
      }
      // console.log(this.lyricsObjArr)
    },
    // 设置通过歌词列表调节歌曲进度
    lyricChangeTime(time) {
      this.$refs.music.currentTime = time / 1000
      this.$refs.music.play()
      clearInterval(this.currentTimer)
      this.listenMusic()
    },
    // 获取歌曲评论
    async getSongComment(songId) {
      const { data: res } = await this.$http({
        url: `/comment/music?id=${songId}&limit=20`,
        withCredentials: true, //关键
      })

      // console.log(res)

      // 处理得到的数据
      let commentTotal = res.total
      let hotComment = res.hotComments
      let newComment = res.comments
      setTimeout(() => {
        this.processCommentInfo(commentTotal, hotComment, newComment)
      }, 200)

      this.commentPage = 1
    },
    // 提取评论数据
    processCommentInfo(theCommentTotal, theHotComment, theNewComment) {
      let hotComment = []
      let newComment = []
      let commentTotal = theCommentTotal

      theHotComment.map((item) => {
        let temp = {}
        temp.time = item.time
        temp.content = item.content
        temp.likedCount = item.likedCount
        temp.user_picUrl = item.user.avatarUrl
        temp.user_nickname = item.user.nickname

        return hotComment.push(temp)
      })

      theNewComment.map((item) => {
        let temp = {}
        temp.time = item.time
        temp.content = item.content
        temp.commentId = item.commentId
        temp.likedCount = item.likedCount
        temp.user_picUrl = item.user.avatarUrl
        temp.user_nickname = item.user.nickname

        return newComment.push(temp)
      })

      this.music.comment.hotComment = hotComment
      this.music.comment.newComment = newComment
      this.music.comment.commentTotal = commentTotal

      // console.log(this.music.comment)
    },
    // 监听评论页码改变
    async commentPageChange(page) {
      const thePage = page - 1
      const { data: res } = await this.$http({
        url: `/comment/music?id=${this.music.id}&limit=20&offset=${
          thePage * 20
        }`,
        withCredentials: true, //关键
      })

      let newComment = []
      res.comments.map((item) => {
        let temp = {}
        temp.time = item.time
        temp.content = item.content
        temp.commentId = item.commentId
        temp.likedCount = item.likedCount
        temp.user_picUrl = item.user.avatarUrl
        temp.user_nickname = item.user.nickname

        return newComment.push(temp)
      })
      this.music.comment.newComment = newComment
      // console.log(this.music.comment)

      // 查看另一页评论时，屏幕上划到最新评论标题
      setTimeout(() => {
        const el = document.getElementById('theNewComments')
        const box = document.getElementsByClassName('musicLyrics')[0]
        box.scrollTop = el.offsetTop + 360
      }, 300)
    },
  },
}
</script>

<style lang="less" scoped>
.playbar {
  width: 100%;
  height: 88px;
  background-color: #ffffff;
  border-top: 1px solid #e0e0e0;
  display: flex;
  position: relative;
}

.songImg {
  margin: 12px 8px 12px 16px;
  position: relative;
  > .el-icon-arrow-down {
    position: absolute;
    font-size: 36px;
    color: white;
    right: 14px;
    animation: upupdowndown 3s infinite normal;
  }
  > .el-icon-arrow-up {
    position: absolute;
    font-size: 36px;
    color: white;
    right: 14px;
    animation: upupdowndown 3s infinite normal;
  }
  @keyframes upupdowndown {
    0% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(30px);
    }
    100% {
      transform: translateY(0px);
    }
  }
}

.songNameAndArtist {
  width: 150px;
  overflow: hidden;
  padding: 12px 6px;

  // 以下代码为跑马灯效果
  > div {
    position: relative;
    left: -15px;
    width: fit-content;
    white-space: nowrap;
    padding-left: 16px;
  }
  > div:hover::after {
    position: absolute;
    right: -100%;
    content: attr(text);
  }
  > div.change:hover::after {
    content: '';
  }
  > div:hover {
    animation: move linear infinite normal;
  }
  @keyframes move {
    0% {
      transform: translateX(0px);
    }
    100% {
      transform: translateX(-100%);
    }
  }

  > .songname {
    margin-top: 6px;
    margin-bottom: 6px;
    color: #5f6464;
  }
  > .artist {
    color: #768181;
    font-size: 13.6px;
  }
}

.playTools {
  // background-color: rgb(226, 219, 208);
  margin: 12px 56px 12px 56px;
  width: 580px;
  box-sizing: border-box;

  > .playTools_Btns {
    display: flex;
    justify-content: center;
    height: 42px;
    // background-color: blanchedalmond;

    i.el-icon-refresh {
      font-size: 20px;
      padding: 11px;
    }
    i.el-icon-caret-left {
      font-size: 22px;
      padding: 10px 20px 10px 16px;
    }
    i.el-icon-video-play {
      font-size: 24px;
      padding: 9px;
      border-radius: 50%;
      background-color: #f0efef;
    }
    i.el-icon-video-pause {
      font-size: 24px;
      padding: 9px;
      border-radius: 50%;
      background-color: #f0efef;
    }
    i.el-icon-caret-right {
      font-size: 22px;
      padding: 10px 16px 10px 20px;
    }
    span {
      font-size: 14px;
    }
    > .btn_5 {
      padding: 8px 14px;
      > .musicLyricsIsShow {
        color: #ef6767;
      }
    }
    i.el-icon-video-play:hover {
      background-color: #e5e5e5;
    }
    i.el-icon-video-pause:hover {
      background-color: #e5e5e5;
    }
    i.el-icon-caret-left:hover {
      color: #ef6767;
    }
    i.el-icon-caret-right:hover {
      color: #ef6767;
    }
    i.el-icon-refresh:hover {
      color: #ef6767;
    }
    > .btn_5:hover {
      color: #ef6767;
    }
  }

  > .playTools_timebar {
    display: flex;
    justify-content: center;
    height: 22px;
    // background-color: rgb(194, 155, 229);
    > .musicTime {
      font-size: 12px;
      box-sizing: border-box;
      padding-top: 4px;
    }
    > .musicTimeBar {
      width: 420px;
      margin: 0px 8px;

      /deep/ .el-slider__runway {
        height: 4px;
        position: relative;
        top: -5px;
      }
      /deep/ .el-slider__bar {
        background: #ec4141;
        height: 4px;
      }
      /deep/ .el-slider__button {
        background: #ec4141;
        border: 0;
        height: 4px;
        width: 4px;
        position: relative;
        top: -1px;
      }
      /deep/ .el-slider__button:hover {
        background: #ec4141;
        border: 0;
        height: 12px;
        width: 12px;
        box-shadow: 0 0 10px rgb(241, 230, 230);
      }
    }
  }
}

.otherTools {
  width: 256px;
  display: flex;
  justify-content: flex-end;
  > div {
    margin: 10px;
    position: relative;
    top: 24px;
    height: 32px;
  }

  > .otherTools_box1 {
    div {
      border: 1px solid black;
      border-radius: 4px;
      font-size: 14px;
    }
  }
  > .otherTools_box2 {
    i.el-icon-bangzhu {
      font-size: 22px;
    }
  }
  > .otherTools_box3 {
    .volume_btn {
      padding: 0;
      font-size: 22px;
      border: 0px;
    }
  }
  > .otherTools_box4 {
    i.el-icon-user {
      font-size: 22px;
    }
  }
  > .otherTools_box5 {
    margin-right: 24px;
    i.el-icon-s-grid {
      font-size: 22px;
    }
    i.el-icon-s-grid:hover {
      color: #ec4141;
    }
  }
}

.musicListRightBar {
  position: absolute;
  right: 0%;
  bottom: 88px;
  width: 460px;
  height: 540px;
  overflow: auto;
  background-color: white;
  // border-left: 0.5px solid #c4c2c2;
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.16);
  z-index: 9;

  /deep/ div.cell {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /deep/ .el-table__cell {
    padding: 6px 0;
  }

  > .musicListRightBar_title {
    font-size: 22px;
    font-weight: 800;
    padding: 16px 11px;
  }
  > .musicListRightBar_total {
    padding: 6px 11px;
  }

  i.el-icon-loading {
    font-size: 18px;
    color: #ec4141;
  }
}

.musicLyrics {
  overflow: scroll;
  position: absolute;
  width: 1200px;
  height: 540px;
  bottom: 89px;
  background-image: linear-gradient(#f8aeae, #ffffff);

  > .musicLyrics_title {
    height: 100px;

    > .name {
      width: auto;
      text-align: center;
      padding-top: 10px;
      padding-bottom: 10px;
      font-size: 22px;
      font-weight: 560;
      color: #2b2c2d;
    }
    > .artist {
      width: auto;
      text-align: center;
      color: #8b8e91;
    }
  }

  > .musicLyrics_img_lyrics {
    display: flex;

    > .musicLyrics_musicImg {
      > .el-image {
        border-radius: 50%;
        margin: 36px;
        padding: 10px;
        background-color: rgba(240, 150, 150, 0.5);

        /deep/ .el-image__inner {
          border-radius: 50%;
          animation: fadenum 90s infinite;
        }

        @keyframes fadenum {
          100% {
            transform: rotate(360deg);
          }
        }
      }
    }

    > .musicLyrics_lyricsBox {
      overflow: auto;
      height: 360px;
      width: 500px;

      /deep/ ul {
        padding: 0;
        padding-top: 120px;
        padding-bottom: 120px;
        user-select: none;

        li {
          padding-top: 8px;
          padding-bottom: 8px;
          list-style: none;
          text-align: center;
          color: #818181;
        }
        > #nowLi {
          color: black;
          font-size: 16px;
          font-weight: bold;
        }
      }
    }

    ::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      box-shadow: 0;
      background: #fda8a8;
    }
    /deep/ ::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      box-shadow: 0;
      background-image: linear-gradient(#fddcdc, #fcd6d6);
    }
  }
  .musicLyrics::-webkit-scrollbar {
    display: none;
  }

  > .musicLyrics_comment {
    position: relative;

    > div {
      width: 600px;
      position: relative;
      left: 50%;
      transform: translate(-50%, 0);
    }
    > .commentTotal {
      font-size: 18px;
      font-weight: bold;
      padding-top: 18px;
      padding-bottom: 18px;
    }
    > .hotComment {
      /deep/ .el-image {
        border-radius: 50%;
        .el-image__inner {
          border-radius: 50%;
        }
      }
      /deep/ ul {
        padding: 0;
        margin: 0;
        li {
          list-style: none;
          display: flex;
          border-bottom: 1px solid #d8d3d1;
        }
      }
      .nickname_content {
        min-width: 518px;
        .nickname {
          font-size: 14px;
          color: #0b58b0;
        }
        .content {
          font-size: 14px;
        }
      }

      .time_likedCount {
        min-width: 518px;
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        padding-top: 6px;
        padding-bottom: 12px;
        color: #a5a09f;
      }
    }
    > .newComment {
      /deep/ .el-image {
        border-radius: 50%;
        .el-image__inner {
          border-radius: 50%;
        }
      }
      /deep/ ul {
        padding: 0;
        margin: 0;
        li {
          list-style: none;
          display: flex;
          border-bottom: 1px solid #d8d3d1;
        }
      }
      .nickname_content {
        min-width: 518px;
        .nickname {
          font-size: 14px;
          color: #0b58b0;
        }
        .content {
          font-size: 14px;
        }
      }

      .time_likedCount {
        min-width: 518px;
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        padding-top: 6px;
        padding-bottom: 12px;
        color: #a5a09f;
      }
    }
    > .commentPagination {
      margin-top: 12px;

      /deep/ li {
        font-size: 14px;
        padding-left: 8px;
        padding-right: 8px;
      }
      /deep/ li.active {
        background-color: #ec4141;
        color: white;
        border-radius: 16px;
      }
    }
  }
}
</style>